<template>
  <view class="page-content">
    <NestedBanner :bannerList="bannerList" imgLabelKey="imageUrl">
    </NestedBanner>
    <u-navbar :bgColor="navbarBgColor">
      <template #left>
        <view
          :style="navbarTitleStyle"
          class="user-info items-center justify-between"
        >
          <view class="flex items-center">
            <u-image
              width="36px"
              height="36px"
              shape="circle"
              src="https://qxt-oss.yummall.cn/1762452183367946240/image/m0oyxuxy-1kai3bkj9.jpg"
            ></u-image>
            <view class="w-154 px-12">
              <view class="text-14 text-ellipsis w-100">
                {{ customerInfo.nickname || customerInfo.username || "" }}
              </view>
              <view class="text-10 pt-4">{{
                customerInfo.description || ""
              }}</view>
            </view>
          </view>
          <view class="shop-card">
            <u-badge
              max="99"
              :value="shoppingCartNum"
              absolute
              :offset="[2, -10]"
            ></u-badge>
            <u-icon
              name="shopping-cart"
              size="24"
              color="#333"
              @click="navToCart"
            ></u-icon>
          </view>
        </view>
      </template>
    </u-navbar>
    <view
      class="absolute border-box w-full pr-12 flex justify-between"
      :style="{ top: searchTop }"
    >
      <view
        class="search-box ml-12 pl-16 pr-4 flex items-center justify-between"
        @click="searchClick"
      >
        <view class="flex items-center">
          <u-icon name="search" size="24" color="#999"></u-icon>
          <text class="color-gray text-12">搜索商品</text>
        </view>
        <u-button
          type="primary"
          shape="circle"
          :custom-style="{
            width: '90rpx',
            height: '48rpx',
            fontSize: '24rpx',
            margin: 0,
            padding: 0,
          }"
        >
          <text>搜索</text>
        </u-button>
      </view>
      <u-icon
        name="share"
        size="24"
        color="#fff"
        label="分享"
        label-size="14"
        label-color="#fff"
      ></u-icon>
    </view>

    <!-- 商品专栏 -->
    <view class="navList">
      <view
        v-for="item in navList"
        :style="{ backgroundImage: `url(${item.icon})` }"
        class="nav-item"
        @click="navToGoodsSection('specialColumn', item)"
      >
        <view class="text-14">{{ item.name }}</view>
        <view class="text-10 color-gray pt-4">{{
          item.description || ""
        }}</view>
      </view>
    </view>

    <view class="card-grid">
      <!-- <view class="card-item">
				<view class="grid-card-title pb-10">
					<text>限时活动专区</text>
					<view class="text-10 color-white tag-pirmary">联农,带农,益农</view>
				</view>
				<u-swiper :radius="8" height="188rpx" :list="list" @click="swiperClick"></u-swiper>
			</view>
			<view class="card-item" @click="navToGoodsSection({ title: '远方全球购' })">
				<view class="grid-card-title pb-10">
					限时限量购
					<view class="text-10 tag-error">全场满6件减30元</view>
				</view>
				<view class="flex gap-12">
					<view>
						<u-image width="140rpx" height="140rpx"
							src="https://th.bing.com/th/id/OIP.LPeKjDDa_Txsum_LNUfbzAAAAA?rs=1&pid=ImgDetMain"></u-image>
						<view class="flex text-10 mt-8 color-white gap-4 justify-center">
							<text class="price-label color-black">到手价</text>
							<text class="price-box">￥19.9</text>
						</view>
					</view>
					<view>
						<u-image width="140rpx" height="140rpx"
							src="https://img.shetu66.com/2022/10/29/1667014461013132.jpg"></u-image>
						<view class="flex text-10 mt-8 color-white gap-4 justify-center">
							<text class="price-label color-black">到手价</text>
							<text class="price-box">￥19.9</text>
						</view>
					</view>
				</view>
			</view> -->
      <!-- 商品活动 -->
      <view
        class="card-item"
        v-for="(item, index) in activityList"
        :key="index"
        @click="navToGoodsSection('activity', item)"
      >
        <view class="grid-card-title mb-10 u-line-1"> {{ item.name }} </view>
        <view class="flex">
          <view>
            <u-image
              width="320rpx"
              height="140rpx"
              :src="item.activityImg"
            ></u-image>
            <view class="flex text-10 mt-8 color-white gap-4 justify-center">
              <!-- <text class="price-label color-black">{{item.name}}</text> -->
              <!-- <text class="price-box">￥19.9</text> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--  活动和商品推荐列表  -->
    <GoodsRecommendedation></GoodsRecommendedation>
    <!-- 商品列表-->
    <view class="navList" :style="{ top: navBarHeight }">
      <view
        v-for="(item, index) in goodsNavList"
        class="text-center"
        @click="changeGoodsNav(index)"
      >
        <view class="text-14">{{ item.title }}</view>
        <view
          class="text-10 color-gray h-15 line-height-15"
          :class="{ 'active-subTitle': current === index }"
        >
          {{ item.subTitle }}
        </view>
      </view>
    </view>
    <z-paging
      ref="paging"
      v-model="goodsList"
      @query="queryList"
      :use-page-scroll="true"
      :auto-scroll-to-top-when-reload="false"
      :auto-clean-list-when-reload="false"
    >
      <WaterfallGoodsList :dataList="goodsList"></WaterfallGoodsList>
    </z-paging>
  </view>
</template>

<script>
import NestedBanner from "@/components/nested-banner/nested-banner";
import WaterfallGoodsList from "@/components/waterfull-goods-list/waterfall-goods-list.vue";
import GoodsRecommendedation from "./goodsRecommendedation/index.vue";
import {
  fetchGoodsPageList,
  fetchGoodsSpecialColumnList,
  fetchMiActivityList,
  fetchShoppingCartList,
} from "@/services/api";
import { fetchBannerList } from "@/services/api/community";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    NestedBanner,
    WaterfallGoodsList,
    GoodsRecommendedation,
  },
  data() {
    return {
      navBarHeight: "44px",
      //购物车数量
      cartNumber: 0,
      navList: [],
      // 商品主推分类, 需要查询分类
      goodsNavList: [
        {
          title: "有机生活",
          subTitle: "安全健康",
        },
        {
          title: "安全食材",
          subTitle: "吃的放心",
        },
        {
          title: "本月上新",
          subTitle: "新品发布",
        },
        {
          title: "心选好物",
          subTitle: "严选好货",
        },
      ],
      current: 0,
      list: [
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
      ],
      title: "Hello",
      value: 99,
      navbarBgColor: "transparent",
      navbarTitleStyle: "color:white",
      searchTop: "44px",
      // 占位图片
      bannerList: [
        // {
        // 	url: "https://haowallpaper.com/link/common/file/previewFileImg/786d50481e9c29b09d0ced4c83ca67f0786d50481e9c29b09d0ced4c83ca67f0",
        // },
        // {
        // 	url: "https://haowallpaper.com/link/common/file/getCroppingImg/15053409163382080",
        // },
      ],
      goodsList: [],
      // 专栏信息
      specialColumnInfo: {},
      // 促销活动信息
      activityList: [],
    };
  },
  onLoad() {
    //获取搜索框距离顶部的距离
    this.getSearchTop();
    this.getNavBarHeight();
    this.getBannerList();
    this.getSpecialColumn();
    // this.getActivityList();
    this.getGoodsCard();
  },
  computed: {
    ...mapGetters("user", {
      customerInfo: "getCustomerInfo",
    }),
    ...mapGetters("goods", { shoppingCartNum: "getShoppingCartNum" }),
  },
  mounted() {
    this.getGoodsCard();
  },
  methods: {
    ...mapActions("goods", ["updateShoppingCartNum"]),
    onPageScroll(e) {
      if (e.scrollTop > 44 && this.navbarBgColor === "transparent") {
        this.navbarBgColor = "#f5f6f7";
        this.navbarTitleStyle = "color:black";
      }
      if (e.scrollTop < 44) {
        this.navbarBgColor = "transparent";
        this.navbarTitleStyle = "color:white";
      }
    },
    getSearchTop() {
      this.searchTop = 44 + 12 + uni.$u.sys().statusBarHeight + "px";
    },
    getNavBarHeight() {
      this.navBarHeight = 44 + uni.$u.sys().statusBarHeight + "px";
    },
    changeGoodsNav(index) {
      this.current = index;
      this.$refs.paging.reload();
    },
    async queryList(pageNum, pageSize) {
      const { data, error } = await fetchGoodsPageList({
        pagination: {
          pageNum,
          pageSize,
        },
      });
      this.$refs.paging?.complete(data);
    },
    swiperClick(e) {
      this.$Router.push({
        name: "traceableAlbum",
      });
    },
    // 跳转商品专栏
    navToGoodsSection(type, item) {
      this.$Router.push({
        name: "goodsSection",
        params: {
          title: item.title,
          serialNo: item.serialNo,
          type: type,
        },
      });
    },
    navToCart() {
      this.$Router.push({
        name: "shopCar",
      });
    },
    async getBannerList() {
      const { data, error } = await fetchBannerList({
        type: "1",
      });
      if (!error) {
        this.bannerList = data;
      }
    },
    async getSpecialColumn() {
      const { data, error } = await fetchGoodsSpecialColumnList();
      if (!error) {
        this.navList = data;
        console.log("数据是", data);
      }
    },
    async getActivityList() {
      const { data, error } = await fetchMiActivityList({
        // 4 其他
        category: "4",
        // 活动类型：1、客户活动 2、商户活动
        type: "2",
      });
      if (!error) {
        console.log("数据是", data);
        this.activityList = data;
      }
    },
    searchClick() {
      this.$Router.push({ name: "search" });
    },
    //获取购物车
    async getGoodsCard() {
      const { code, data } = await fetchShoppingCartList();
      if (code == 0) {
        // this.cartNumber = data.length;
        this.updateShoppingCartNum(data.length);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  position: relative;

  .search-box {
    width: 540rpx;
    height: 60rpx;
    background: #fff;
    border-radius: 30rpx;
  }

  .user-info {
    display: flex;
  }

  .shop-card {
    position: relative;
    width: 72rpx;
    height: 72rpx;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .test {
    height: 900px;
  }

  .navList {
    position: sticky;
    z-index: 2;
    display: grid;
    background: #fff;
    gap: 24rpx;
    grid-template-columns: repeat(4, 1fr);
    padding: 24rpx;

    .nav-item {
      background-repeat: no-repeat;
      background-position: bottom right;
      background-size: contain;
      background-size: 34px 26px;
      padding: 16rpx;
      height: 88rpx;
      border-radius: 24rpx;
      box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.06);
    }
  }

  .active-subTitle {
    background: #4cd964;
    color: #fff;
    border-radius: 15rpx;
    padding: 0 12rpx;
    width: fit-content;
    margin: 0 auto;
  }

  .card-grid {
    padding: 24rpx;
    display: grid;
    gap: 24rpx;
    grid-template-columns: repeat(2, 1fr);

    .card-item {
      border-radius: 24rpx;
      background-color: #fff;
      box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.06);
      height: 220rpx;
      box-sizing: border-box;
      padding: 12rpx;

      .grid-card-title {
        font-size: 28rpx;
        color: #242424;
        // font-weight: bold;
        display: flex;
        // gap: 16rpx;

        .tag-pirmary {
          background: $u-primary;
          padding: 4rpx 8rpx;
          height: fit-content;
          border-radius: 8rpx;
        }

        .tag-error {
          background: $u-error-light;
          padding: 4rpx;
          height: fit-content;
          border-radius: 8rpx;
          color: $u-error;
        }
      }

      .price-box {
        padding: 0 4rpx;
        background: $u-error;
      }

      .price-label {
        background: linear-gradient(to right, #f5d6a0, #fff);
      }
    }
  }
}
</style>
